<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <h2>{{name.split('').reverse().join('')}}</h2>
        <h2>{{name|rev}}</h2>
        <h2>{{rev()}}</h2>
        <h2>{{revName}}</h2>
        <input type="text" v-model='name'>
        <input type="text" v-model='age'>
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    Vue.filter('rev',function(val){
      console.log('filter')
      return val.split('').reverse().join('')
    })
    let vm = new Vue({
        el:'#app',
        data:{
            name:"珠峰",
            age:10,
        },
        methods: {
          rev(){
            console.log('method')
            return this.name.split('').reverse().join('')
          }
        },
        computed: {
          // 这里的属性也最终会被挂载到当前实例上  methods data  computed 这三者中的属性名 不能重复
          // revName(){
          //   // this也是当前实例
          //   // 只要这个属性的依赖不发生改变  那么这个函数就不会执行
          //   // (依赖:) 在这个函数中 同步使用的vue变量
          //   console.log('计算属性')
          //   // console.log(this.name)
          //   // return 666
          //   return this.name.split('').reverse().join('')
          // }
          // // 这种简写方式 只是相当于 写了一个get函数
          revName:{
            get(){
              setTimeout(() => {
                console.log(this.age)
              }, 10);
              console.log('计算属性')
              return this.name.split('').reverse().join('')
            },
            set(val){
              // 当我们 给 revName设置值的时候会触发这个函数
              // val 对应的就是设置的值
              console.log(val)
              this.name = val.split('').reverse().join('')
            }
          }
        },
    });
</script>